<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">Default Tree</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-6">
            <span ng-if="doingAsync">...loading...</span>
            <abn-tree tree-data="myTreeData" tree-control="myTree" on-select="myTreeHandler(branch)"
                      expand-level="2" initial-selection="Granny Smith"></abn-tree>
          </div>
          <div class="col-md-6">

            <p class="btn-group">
              <button ng-click="tryChangingTheTreeData()" class="btn btn-default btn-sm">
                Change The Tree Definition
              </button>
              <button ng-click="tryAsyncLoad()" class="btn btn-default btn-sm">
                Load Tree Data Asynchronously
              </button>
            </p>

            <p class="btn-group">
              <button ng-click="myTree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
              <button ng-click="myTree.collapse_branch()" class="btn btn-default btn-sm">Collapse
              </button>
              <button ng-click="myTree.expandAll()" class="btn btn-default btn-sm">Expand All</button>
              <button ng-click="myTree.collapse_all()" class="btn btn-default btn-sm">Collapse All
              </button>
            </p>

            <p class="btn-group">
              <button ng-click="myTree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
              <button ng-click="tryAddingABranch()" class="btn btn-default btn-sm">Add Branch</button>
              <button ng-click="myTree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
            </p>
            <p class="btn-group">
              <button ng-click="myTree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
              <button ng-click="myTree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
              <button ng-click="myTree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
              <button ng-click="myTree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
            </p>

            <div class="alert alert-warning">{{ output }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
